<!-- polls/templates/polls/index.html -->
{% extends "polls/base.html" %}

{% block title %}最新投票{% endblock %}

{% block content %}
<div class="container">
    <div class="row mb-4">
        <div class="col-md-8">
            <h1 class="display-4 fw-bold">最新投票</h1>
            <p class="lead text-muted">参与最新的投票活动，表达您的意见</p>
        </div>
        {% if user.is_staff %}
        <div class="col-md-4 text-end">
            <a href="{% url 'admin:polls_question_add' %}" class="btn btn-success btn-lg">
                <i class="bi bi-plus-circle"></i> 创建新投票
            </a>
        </div>
        {% endif %}
    </div>

    <div class="row">
        <div class="col-lg-8">
            {% if latest_question_list %}
            <div class="row row-cols-1 g-4">
                {% for question in latest_question_list %}
                <div class="col">
                    <div class="card shadow">
                        <div class="card-header bg-primary text-white">
                            <div class="d-flex justify-content-between align-items-center">
                                <h3 class="mb-0">{{ question.question_text }}</h3>
                                {% if question.was_published_recently %}
                                <span class="badge bg-warning">新发布</span>
                                {% endif %}
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="d-flex justify-content-between mb-3">
                                <div>
                                    <span class="text-muted">
                                        <i class="bi bi-calendar-event me-1"></i>
                                        {{ question.pub_date|date:"Y年m月d日" }}
                                    </span>
                                    {% if question.end_date %}
                                    <span class="ms-3 text-muted">
                                        <i class="bi bi-clock me-1"></i>
                                        截止: {{ question.end_date|date:"Y年m月d日" }}
                                    </span>
                                    {% endif %}
                                </div>
                                <span class="badge bg-primary">
                                    {{ question.choice_set.count }} 个选项
                                </span>
                            </div>
                            
                        </div>
                        <div class="card-footer bg-white">
                            <div class="d-flex justify-content-between">
                                <a href="{% url 'polls:detail' question.id %}" class="btn btn-primary vote-btn">
                                    <i class="bi bi-pencil-square"></i> 立即投票
                                </a>
                                <a href="{% url 'polls:results' question.id %}" class="btn btn-outline-secondary">
                                    <i class="bi bi-bar-chart"></i> 查看结果
                                </a>
                                {% if user.is_staff %}
                                <a href="{% url 'admin:polls_question_change' question.id %}" 
                                   class="btn btn-sm btn-outline-primary ms-2">
                                    <i class="bi bi-gear"></i> 管理
                                </a>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <div class="card text-center shadow">
                <div class="card-body py-5">
                    <i class="bi bi-exclamation-circle display-4 text-muted mb-4"></i>
                    <h3 class="text-muted">暂无投票活动</h3>
                    {% if user.is_staff %}
                    <a href="{% url 'admin:polls_question_add' %}" class="btn btn-primary mt-3">
                        <i class="bi bi-plus-circle"></i> 创建第一个投票
                    </a>
                    {% endif %}
                </div>
            </div>
            {% endif %}
        </div>

        <div class="col-lg-4">
            <div class="card shadow mb-4">
                <div class="card-header bg-light">
                    <h5 class="mb-0"><i class="bi bi-info-circle me-2"></i>投票统计</h5>
                </div>
                <div class="card-body">
                    <div class="list-group list-group-flush">
                        <div class="list-group-item d-flex justify-content-between align-items-center">
                            <span>总投票数</span>
                            <span class="badge bg-primary rounded-pill">{{ total_polls }}</span>
                        </div>
                        <div class="list-group-item d-flex justify-content-between align-items-center">
                            <span>进行中投票</span>
                            <span class="badge bg-success rounded-pill">{{ active_polls }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card shadow">
                <div class="card-header bg-light">
                    <h5 class="mb-0"><i class="bi bi-question-circle me-2"></i>如何参与?</h5>
                </div>
                <div class="card-body">
                    <ol class="list-group list-group-numbered list-group-flush">
                        <li class="list-group-item">选择您感兴趣的投票</li>
                        <li class="list-group-item">阅读问题描述和选项</li>
                        <li class="list-group-item">选择您的答案并提交</li>
                        <li class="list-group-item">查看实时投票结果</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}